<script setup>
/**
 * tableData 表单数据
 * tableHeader 表头数据 
 *    可有参数：prop label width(列宽) slot(插槽) slotName(插槽名) type(default ,index )
 * isLoading 加载动画
 * 
*/

const props = defineProps({
  tableData: {
    type: Array,
    default: []
  },
  tableHeader: {
    type: Array,
    default: []
  },
  tableProp: {
    type: Object,
    default: {
      isIndex: false,
      IndexText: '',
      expandAll: false,
      height: '55vh',
      rowClassName: ({ row, rowIndex }) => { return '' },

    }
  },
  isLoading: {
    type: Boolean,
    defalut: false
  }
})

const loading = computed(() => props.isLoading)
</script>


<template>
  <div class="common-table-container">
    <el-table v-loading="loading" :data="props.tableData" :height="props.tableProp.height"
      :tree-props="{ hasChildren: 'hasChildren', children: 'children' }" row-key="id"
      :default-expand-all="props.tableProp.expandAll" :row-class-name="props.tableProp.rowClassName">
      <el-table-column v-if="tableProp.isIndex" type="index" align="center" width="60" :label="tableProp.IndexText">
      </el-table-column>
      <el-table-column v-for="(item, index) in props.tableHeader" :key="index" v-bind="item.data" align="center">
        <!-- 默认内容 -->
        <template #default="scope">
          <!-- 自定义内容 -->
          <slot v-if="item.slot" :name="item.slot" :scope="scope.row" :index="scope.$index"></slot>
          <span v-if="!item.slot">{{ scope.row[item.data?.prop] }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="暂无表格数据" />
      </template>
    </el-table>
  </div>
</template>

<style lang="scss" scoped>
.common-table-container {

  :deep(.el-table__header) {
    th {
      padding: 0;

      .cell {
        padding: 12px 15px;
        color: #686868;
        background-color: #d3e3ff6b;
      }
    }
  }

  :deep(.el-table__body) {
    .cell {
      padding: 2px 5px;
    }
  }

}
</style>